<template>
	<view class="wrap">
	<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/1.png" class="bg-set"
		mode=""></image>

		<u-sticky bgColor="none">
			<view :class="[hasbg?'bgs1':'']">
		<u-tabs height="60" bg-color="none" font-size="28" active-color="#fff" :bar-style="barSty"
			:active-item-style="ActiveStyle" inactive-color="#fff" :list="categoryList" name="categoryName"
			:current="current" @change="change">
		</u-tabs>
		</view>
		</u-sticky>
		<!-- </u-sticky> -->

		<!-- 瀑布流 -->
		<view v-if="list1.length" class="morePlay">
			
			<mobile v-if="categoryType=='mobile'" :list="list" />
			
			<pc v-else-if="categoryType=='pc'" :list="list" />
			<!-- 头像 -->
			<biaoqingList v-else-if="categoryType=='photo'" :list="list" />
			<uni-load-more :status="status"></uni-load-more>
		</view>
		
		<view v-else class="empty">
			<u-empty src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/nodata!.png" v-if="!list1.length && senDate"
				text="暂无数据" mode="list"></u-empty>
		</view>
		


	</view>
</template>

<script>
	import mobile from '../gallery/mobilemoreList.vue';
	import pc from '../gallery/pcmoreList';
	import biaoqingList from '../gallery/biaoqingList.vue';
	// import trends from './trendshistory'
	export default {
		components: {
			mobile,
			pc,
			biaoqingList,
			// trends
		},
		data() {
			return {
				
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],
				
				
				hasbg:false,
				ActiveStyle: {
					fontSize: '32rpx',
				},
				barSty: {
					width: '50rpx',
					height: '5rpx',
					background: '#68C3C9'
				},
				categoryList: [],
				categoryType: 'photo',
				categoryId: 1,
				// 图片列表
				current: 0,
				
			}
		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;
		
				this.getlist();
		
			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		
		onPageScroll(e) { //uniapp自带的监听滚动条方法
			
		if (e.scrollTop >= 80) {
			this.hasbg = true
		} else {
			this.hasbg = false
		}
		},
		
		
		onLoad() {
			this.getCategoryList()
		},
		
		methods: {
			
			
			// 获取图集列表
			getlist() {
				this.senDate = false;
				this.$u.api.mine.getDownloadPicList({
						page: this.formData.page,
						size: this.formData.pageSize,
						categoryId: this.categoryId,
						appletId: this.vuex_appletId
					})
					.then((res) => {
						this.senDate = true;
						if (res.code == 200) {
							this.total = res.data.total;
							this.list1 = this.list1.concat(res.data.list);
							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {
							console.log("请求数据失败");
						}
					});
			},
			// 获取分类列表
			getCategoryList() {
				this.$u.api.mine.getDownloadCategory({appletId: this.vuex_appletId}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.categoryList = res.data?.map(r => {
						return {
							...r,
							name: r.categoryName
						}
					})
					this.categoryId = this.categoryList?.[this.current]?.categoryId
					// 获取图集列表
					this.getlist()
				})
			},
			
			
			
			change(index) {
				this.current = index;
				this.formData.page = 1
				this.categoryId = this.categoryList?. [this.current]?.categoryId
			
				this.list1 = []
				this.getlist();
			},
			
	
			
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		margin: 0 24rpx;
		.bg-set {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 181rpx;
			// z-index: -1;
		}
		.bgs1 {
			overflow: hidden;
			width: 100%;
			background: rgba(19, 20, 32, 1);
			z-index: 8;
		}
		

		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Light, PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 42rpx;
		}
	}
</style>
